<template>
  <div class="container">
    <div class="top">
      <el-button type="primary" plain @click="rainfall">降雨量警戒值设置</el-button>
      <el-button type="primary" plain @click="gauge">雨量计管理</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" v-show="!showGauge" v-loading="loading" height="calc(100% - 40px)">
      <el-table-column type="index" label="序号" width="55"> </el-table-column>
      <el-table-column prop="section" label="责任区段"> </el-table-column>
      <el-table-column prop="workArea" label="责任工区"> </el-table-column>
      <el-table-column prop="location" label="雨量计地点"> </el-table-column>d
      <el-table-column label="最高降雨量">
        <el-table-column prop="tenMinute" label="10分钟/mm"> </el-table-column>
        <el-table-column prop="oneHour" label="1小时/mm"> </el-table-column>
        <el-table-column prop="oneDay" label="日/mm"> </el-table-column>
      </el-table-column>
      <el-table-column prop="status" label="预警状态">
        <template #default="scope">
          {{ scope.row.status==0?"无":scope.row.status==1?"出巡预警":scope.row.status==2?"限速预警":scope.row.status==3?"封锁预警":""}}
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑对话框 -->
    <el-dialog title="管理" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="auto">
        <el-form-item label="区段" prop="sectionId">
          <el-tree-select v-model="form.sectionId" :data="dataSource"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" :render-after-expand="false"
            check-strictly @change="treeChange">
          </el-tree-select>
        </el-form-item>
        <el-form-item label="工区" prop="workAreaId">
          <el-tree-select v-model="form.workAreaId" :data="dataSourceArea"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" :render-after-expand="false"
            check-strictly>
          </el-tree-select>
        </el-form-item>
        <el-form-item label="雨量计地点" label-width="auto" style="width: 300px;">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="最高降雨量10分钟/mm" prop="tenMinute">
          <el-input-number v-model="form.tenMinute" :min="0" />
        </el-form-item>
        <el-form-item label="最高降雨量1小时/mm" prop="oneHour">
          <el-input-number v-model="form.oneHour" :min="0" />
        </el-form-item>
        <el-form-item label="最高降雨量日/mm" prop="oneDay">
          <el-input-number v-model="form.oneDay" :min="0" />
        </el-form-item>
        <el-form-item label="预警状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择" clearable>
            <el-option v-for="item in typeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>



    <div v-show="showGauge" style="height: calc(100% - 30px);">
      <el-button type="primary" plain @click="addGaugeData">新增</el-button>
      <el-table :data="tableDataGauge" style="width: 100%" height="calc(100% - 40px)">
        <el-table-column type="index" label="序号" width="55"> </el-table-column>
        <el-table-column prop="section" label="责任区段"> </el-table-column>
        <el-table-column prop="workArea" label="责任工区"> </el-table-column>
        <el-table-column prop="region" label="所属区间"> </el-table-column>
        <el-table-column prop="person" label="责任人"> </el-table-column>
        <el-table-column prop="location" label="安装地点"> </el-table-column>
        <el-table-column label="位置">
        <template #default="scope">{{scope.row.lon ||''}}
          <span v-show="scope.row.lon&&scope.row.lat">,</span>
          {{ scope.row.lat ||'' }}
        </template>
      </el-table-column>
        <el-table-column prop="kilometer" label="公里标"> </el-table-column>
        <el-table-column prop="dictLabel" label="雨量计类型"> </el-table-column>
        <el-table-column prop="date" label="操作">
          <template #default="scope">
            <el-icon title="编辑" @click="editGaugeData(scope.row)">
              <Edit />
            </el-icon>
            &nbsp;
            <el-icon title="删除" @click="delGaugeData(scope.row)">
              <Delete />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 雨量计新增对话框 -->
    <el-dialog title="雨量计管理" v-model="openGauge" width="600px" append-to-body>
      <el-form ref="postRefGauge" :model="formGauge" :rules="rulesGauge" label-width="100px">
        <el-form-item label="区段" prop="sectionId">
          <el-tree-select v-model="formGauge.sectionId" :data="dataSource"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" :render-after-expand="false"
            check-strictly @change="treeChangeGauge">
          </el-tree-select>
        </el-form-item>
        <el-form-item label="责任人" prop="personId">
          <el-select v-model="formGauge.personId" placeholder="请选择" clearable>
            <el-option v-for="item in options" :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="工区" prop="workAreaId">
          <el-tree-select v-model="formGauge.workAreaId" :data="dataSourceArea"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" :render-after-expand="false"
            check-strictly @change="treeGauge">
          </el-tree-select>
        </el-form-item>
        <el-form-item label="所属区间" prop="">
          <el-select v-model="formGauge.rainfallRangeId" placeholder="请选择" clearable>
            <el-option v-for="item in tableList" :key="item.id" :label="item.region" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="安装地点" prop="location" style="width: 320px;">
          <el-input v-model="formGauge.location" />
        </el-form-item>
        <el-form-item label="公里标" prop="kilometer" style="width: 320px;">
          <el-input v-model="formGauge.kilometer" />
        </el-form-item>
        <el-form-item label="雨量计类型" prop="type">
          <el-select v-model="formGauge.type" placeholder="请选择" clearable>
            <el-option v-for="item in typeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <!-- <div style="display: flex;justify-content: space-around">
          <div style="width: 100px;">位置：</div> -->
          <el-form-item label="经度位置" prop="lon">
            <el-input-number v-model="formGauge.lon"/>
          </el-form-item>
          <el-form-item label="纬度位置" prop="lat">
            <el-input-number v-model="formGauge.lat"/>
          </el-form-item>
        <!-- </div> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormGauge">确 定</el-button>
          <el-button @click="cancelGauge">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 降雨量警戒值对话框 -->
    <el-dialog title="降雨量警戒值" v-model="openRange" width="1200px" append-to-body>
      <el-table :data="tableList" style="width: 100%">
        <el-table-column prop="region" label="区间"> </el-table-column>
        <el-table-column label="出巡雨量警戒值(mm)">
          <el-table-column prop="walkaboutTenMinute" label="10分钟雨量">
          </el-table-column>
          <el-table-column prop="walkaboutOneHour" label="小时雨量">
          </el-table-column>
          <el-table-column prop="walkaboutOneDay" label="日连续雨量">
          </el-table-column>
        </el-table-column>
        <el-table-column label="限速雨量警戒值(mm)">
          <el-table-column prop="speedLimitOneHour" label="小时雨量">
          </el-table-column>
          <el-table-column prop="speedLimitOneDayHour" label="日连续+1小时雨量">
            <template #default="scope">
              <span v-show="scope.row.speedLimitOneDay && scope.row.speedLimitOneDayHour">
                {{ scope.row.speedLimitOneDay + "+" + scope.row.speedLimitOneDayHour}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="speedLimitOneDay" label="日连续雨量">
          </el-table-column> -->
        </el-table-column>
        <el-table-column label="封锁雨量警戒值(mm)">
          <el-table-column prop="blockadeOneHour" label="小时雨量">
          </el-table-column>
          <el-table-column prop="blockadeOneDay" label="日连续雨量">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template #default="scope">
            <el-icon title="编辑" @click="editRangeRow(scope.row)">
              <Edit />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelRange">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑降雨量警戒对话框 -->
    <el-dialog title="修改" v-model="isEditRange" width="500px" append-to-body>
      <el-form ref="postRef" :model="formRange" :rules="rulesRange" label-width="auto" label-position="left">
        <el-form-item label="区间" prop="region">
          <el-input v-model="formRange.region" placeholder="请输入区间" />
        </el-form-item>
        <el-form-item label="出巡雨量警戒值(mm)10分钟雨量" prop="walkaboutTenMinute">
          <el-input-number v-model="formRange.walkaboutTenMinute" :min="0" />
        </el-form-item>
        <el-form-item label="出巡雨量警戒值(mm)小时雨量" prop="walkaboutOneHour">
          <el-input-number v-model="formRange.walkaboutOneHour" :min="0" />
        </el-form-item>
        <el-form-item label="出巡雨量警戒值(mm)日连续雨量" prop="walkaboutOneDay">
          <el-input-number v-model="formRange.walkaboutOneDay" :min="0" />
        </el-form-item>
        <el-form-item label="限速雨量警戒值(mm)小时雨量" prop="speedLimitOneHour">
          <el-input-number v-model="formRange.speedLimitOneHour" :min="0" />
        </el-form-item>
        <el-form-item label="限速雨量警戒值(mm)1小时雨量" prop="speedLimitOneDayHour">
          <el-input-number v-model="formRange.speedLimitOneDayHour" :min="0" />
        </el-form-item>
        <el-form-item label="限速雨量警戒值(mm)日连续雨量" prop="speedLimitOneDay">
          <el-input-number v-model="formRange.speedLimitOneDay" :min="0" />
        </el-form-item>
        <el-form-item label="封锁雨量警戒值(mm)小时雨量" prop="blockadeOneHour">
          <el-input-number v-model="formRange.blockadeOneHour" :min="0" />
        </el-form-item>
        <el-form-item label="封锁雨量警戒值(mm)日连续雨量" prop="blockadeOneDay">
          <el-input-number v-model="formRange.blockadeOneDay" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormRange">确 定</el-button>
          <el-button @click="isEditRange = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import {
    getGauge,
    delGauge,
    addGauge,
    editGauge,
    getRain,
    delRain,
    addRain,
    editRain,
    getRange,
    editRange,
    getTreeList,
    getPersonBy,
    getDeptBy,
    getGaugeType
  } from "@/api/work";
  import {
    nextTick
  } from 'vue';
  const {
    proxy
  } = getCurrentInstance();
  //雨量计类型
  const typeList = ref([])

  function getType() {
    getGaugeType().then(res => {
      typeList.value = res.data
    })
  }
  getType()
  //区段数据
  const dataSource = ref([])
  const dataSourceArea = ref([])

  function getTree() {
    getTreeList().then(res => {
      dataSource.value = res.data
    })
  }
  getTree()
  const options = ref([])
  const all = ref([])

  function treeChangeGauge(id) {
    formGauge.value.workAreaId = ''
    formGauge.value.personId = ''
    getDeptBy({
      parentId: id
    }).then(res => {
      dataSourceArea.value = res.data
    })

    getPersonBy({
      deptId: id
    }).then(res => {
      all.value = JSON.parse(JSON.stringify(res.rows))
      options.value = res.rows
    })
  }

  // function treeGauge(id) {
  //   formGauge.value.personId = ''
  //   getPersonBy({
  //     deptId: id
  //   }).then(res => {
  //     all.value = JSON.parse(JSON.stringify(res.rows))
  //     options.value = res.rows
  //   })
  // }







  const openRange = ref(false)
  const showGauge = ref(false)
  const open = ref(false)
  //雨量记录
  const tableData = ref([])
  const loading = ref(true);

  function getList() {
    loading.value = true
    getRain().then(res => {
      loading.value = false
      tableData.value = res.rows
    })
  }
  getList()

  //雨量计管理
  const tableDataGauge = ref([])

  function getListGauge() {
    getGauge().then(res => {
      if (res.rows.length) {
        res.rows.forEach(item => {
          typeList.value.forEach(val => {
            if (val.dictValue == item.type) {
              item.dictLabel = val.dictLabel
            }
          })
        })
      }
      tableDataGauge.value = res.rows
    })
  }
  nextTick(() => {
    getListGauge()
  })


  function gauge() {
    showGauge.value = !showGauge.value
  }
  const openGauge = ref(false)

  function addGaugeData() {
    formGauge.value = {}
    if (typeList.value.length) {
      formGauge.value.type = typeList.value[0].dictValue
    }
    dataSourceArea.value = []
    options.value = []
    openGauge.value = true
  }

  function editGaugeData(row) {
    row.type = row.type + ""
    if (row.sectionId) {
      getDeptBy({
        parentId: row.sectionId
      }).then(res => {
        dataSourceArea.value = res.data
      })
    }
    if (row.sectionId) {
      getPersonBy({
        deptId: row.sectionId
      }).then(res => {
        all.value = JSON.parse(JSON.stringify(res.rows))
        options.value = res.rows
      })
    }
    formGauge.value = row
    openGauge.value = true
  }

  function delGaugeData(data) {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        delGauge(data.id).then(res => {
          ElMessage({
            type: 'success',
            message: '已删除',
          })
          getListGauge()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
  }

  function cancelGauge() {
    openGauge.value = false
  }

  function submitFormGauge() {
    proxy.$refs["postRefGauge"].validate(valid => {
      if (valid) {
        if (formGauge.value.id != undefined) {
          editGauge(formGauge.value).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            openGauge.value = false;
            getListGauge()
          });
        } else {
          addGauge(formGauge.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            openGauge.value = false;
            getListGauge()
          });
        }
      }
    });
  }









  //降雨量警戒值设置
  const tableList = ref([])
  const isEditRange = ref(false)

  function rainfall() {
    openRange.value = true
  }
  function getRangeData(){
    getRange().then(res => {
      tableList.value = res.rows
    })
  }
  getRangeData()

  function cancelRange() {
    openRange.value = false
  }

  function editRangeRow(row) {
    formRange.value = row
    isEditRange.value = true
  }

  function submitFormRange() {
    editRange(formRange.value).then(res => {
      isEditRange.value = false
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      getRange().then(res => {
        tableList.value = res.rows
      })
    })
  }

  const dataRange = reactive({
    formRange: {},
    rulesRange: {}
  });
  const {
    formRange,
    rulesRange
  } = toRefs(dataRange);

  const dataGauge = reactive({
    formGauge: {},
    rulesGauge: {}
  });
  const {
    formGauge,
    rulesGauge
  } = toRefs(dataGauge);

  const data = reactive({
    form: {},
    queryParams: {},
    rules: {}
  });
  const {
    queryParams,
    form,
    rules
  } = toRefs(data);
</script>

<style lang='scss' scoped>
  .container {
    height: 100%;
    width: 100%;
    padding: 20px;
  }

  .top {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-table .el-table__cell) {
    text-align: center;
  }

  :deep(.el-table--border::before) {
    width: 0px;
    ;
  }

  :deep(.el-table--border::after) {
    width: 0px;
    ;
  }

  :deep(.el-table__inner-wrapper) {
    height: 100% !important;
  }
  :deep(.el-input-number) {
  width: 220px;
  ;
}
</style>